/* jquery事件绑定必须放置在函数中(1.jQuery页面初始加载/事件)  2.js函数中*/
$(function() {
	/* jquery绑定事件 */
	/* 使用了class类选择器 */
	// 	$(".checkUser").click(function(){
	// 		alert("check");
	// 	});
	//添加数据单击事件
	/* 使用后代选择器 + 元素过滤筛选 */
	$(".con button:first").click(function() {
		var $user = $("[name='user']");
		//each 语法: $(selector).each(function(index,element))
		//$.each(function(){});
		$.each(function(i) {
			//if($user[i].val() == ''){}
			if ($($user[i].val() == "")) {
				alert("请输入完整的用户信息!!!");
			}
		});
	});

	//init();

	//常识: a href ="javascript:void(0);"  :  禁止刷新当前页面
	//使用jquery动态删除当前数据
	$(".del").click(function() {
		if (confirm("确定删除当前数据么?")) {
			//删除
			//this 当前dom元素
			$(this).parent().parent().remove();
		}
	});

	//jquery 鼠标移进(mouseover,mouseenter),移出(mouseout,mouseleave)事件
	//mouseover 和 mouseout 一套使用; mouseenter 和 mouseleave一套使用
	//mouseover 和 mouseenter 区别 :mouseover事件在鼠标移动到选取的元素及其子元素上时触发
	//								mouseenter事件只在鼠标移动到选取的元素上时触发
	//需求:鼠标移动到当前显示行,加深背景颜色
	//鼠标移进
	$(".con ul").mouseover(function() {
		//常识: 1.css()样式添加的是行内样式   2.addClass() 添加class样式
		//样式引用遵循"就近原则",行内>内部>外部
		//选择器使用的遵循的是: ID选择器 > class选择器 >标签选择器
		//$(this).css("background-color","black")
		$(this).addClass("bg");

	});
	//鼠标移出
	$(".con ul").mouseout(function() {
		//$(this).css("background-color","lightcyan")
		$(this).removeClass("bg");

	});

	//click mouseover mouseout 属于单个事件;hover 鼠标移进,移出事件, 属于复合事件
	$(".con ul").hover(function() {
		$(this).css("border", "1px solid green");
	}, function() {
		$(this).css("border", "1px solid white");
	});
	
	//搜索查询
	$(".rightButton button").click(function(){
		//获取搜索文本框值
		var $search = $("#search").val();
		if($search == ''){
			//默认查询所有
			init();
		}else{
			$(".con").empty();
		}
		//使用jquery获取dom元素中所有的中签编码
		var $markNo = $(".markNo");
		//循环遍历
		//1.将查询的数据重新加载绑定 2.删除查询匹配之外的数据(不太符合正常流程)
		$markNo.each(function(i){
			var mNo = $($markNo.get(i)).text();
			if($search == mNo){
				//console.log(i);
				var $ul = $(".con ul").eq(i);
				//console.log($ul.html());
				$(".con").html($ul);
			}
		});
	});

});

/* 初始加载数据 --> json数据绑定 */
function init(){
	//初始加载列表数据
	//js操作dom元素 --> jQuery也可操作dom元素
	//ECMAScript 简称 ES   ES6(ECMAScript版本名称)
	//js定义数据类型的关键字,var是ES5之前定义数据类型关键字,ES6建议使用let定义数据类型关键字
	//需求:将前端页面静态数据更改成动态数据
	//使用json数据存储一个对象
	//未持照 1 已持照 0 
	var arrStatus = new Array("未持照", "已持照");
	var jsonUl = {
		"userName": "胡应修",
		"markNo": "bj53473409",
		"status": 1,
		"phone": "13574556682",
		"openDate": "2021-07-07"
	};
	
	//使用json存储多个对象
	var jsonUlArrs = [{
			"userName": "胡应修",
			"markNo": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"userName": "尚晶品",
			"markNo": "bj53473408",
			"status": 0,
			"phone": "13574556683",
			"openDate": "2021-07-06"
		},
		{
			"userName": "饶嘉涛",
			"markNo": "bj53473407",
			"status": 1,
			"phone": "13574556684",
			"openDate": "2021-07-05"
		},
		{
			"userName": "张传玉",
			"markNo": "bj53473406",
			"status": 0,
			"phone": "13574556685",
			"openDate": "2021-07-04"
		},
		{
			"userName": "张小雨",
			"markNo": "hb99971228",
			"status": "0",
			"phone": "18774556690",
			"openDate": "2021-07-04"
		},
		{
			"userName": "冯恢弘",
			"markNo": "sh93452821",
			"status": "1",
			"phone": "13250504432",
			"openDate": "2021-07-03"
		},
		{
			"userName": "温暖",
			"markNo": "fj633009sdf",
			"status": "1",
			"phone": "13756690450",
			"openDate": "2021-07-02"
		},
		{
			"userName": "张小野",
			"markNo": "yr78gj8qg",
			"status": "1",
			"phone": "13030337456",
			"openDate": "2022-12-29"
		},
		{
			"userName": "李利",
			"markNo": "oupjg8jo3q8",
			"status": "1",
			"phone": "13412344900",
			"openDate": "2022-12-29"
		},
		{
			"userName": "杜若晖",
			"markNo": "so7gvpkz",
			"status": "1",
			"phone": "15833280099",
			"openDate": "2022-12-29"
		}
	];
	
	
	var $ul = `<ul>
							<li>${jsonUl.userName}</li>
							<li>${jsonUl.markNo}</li>
							<li>${arrStatus[jsonUl.status]}</li>
							<li>${jsonUl.phone}</li>
							<li>${jsonUl.openDate}</li>
				</ul>`;
	//循环遍历json对象数组
	var $ulStr = "";
	$(jsonUlArrs).each(function(index) {
		var arrJson = jsonUlArrs[index];
		$ulStr += `<ul>
							<li>${arrJson.userName}</li>
							<li class="markNo">${arrJson.markNo}</li>
							<li>${arrStatus[arrJson.status]}</li>
							<li>${arrJson.phone}</li>
							<li>${arrJson.openDate}</li>
							<li>
								<a href="">详情</a>&nbsp;&nbsp;
								<a href="javascript:void(0);" class="del">删除</a>
							</li>
				</ul>`;
	});
	//项目前后端不分离: js面试题 > 使用js或者jquery动态追加绑定元素用什么方法? js:appendChild()  jQuery:append()
	//jQuery绑定dom元素
	//A.append(B); 将B元素追加到元素A中(内部)
	//A.appendTo(B); 将B元素追加到元素A中(外部)
	//$(".con").append($ul);
	//$(".con").append($ul);
	$(".con").html($ulStr);
	//使用jQuery进行隔行换色
	//$(".con ul").odd().css("background-color", "lightblue");
	//$(".con ul").even().css("background-color","plum");
}


/* js自定义函数 */
/* function check(){} */
